<template>
  <div>
    项目列表
    <!-- 搜索框 -->
    <el-card id="search">
      <el-row>
        <el-col :span="20">
          <el-col :span="12">
            <el-col :span="12">
              <el-input v-model="searchModel.title" :inline="true" placeholder="请输入项目名" clearable></el-input>
            </el-col>
            <el-select v-model="searchModel.uid" :inline="true" placeholder="请选择维护人">
              <el-option v-for="item in searchModel.userList" :key="item.id" :label="item.username" :value="item.id">
              </el-option>
            </el-select>
          </el-col>
          <el-button type="primary" @click="getClientList" round icon="el-icon-search">查询</el-button>
        </el-col>

        <el-col :span="4" align="right">
          <router-link to="/project/addProject">
            <el-button type="success" round>新增项目</el-button>
          </router-link>
        </el-col>
      </el-row>
    </el-card>
    <!-- 搜索框 -->

    <!-- 表格 -->
    <el-card>
      <template>
        <el-table :data="projectList" stripe style="width: 100%">
          <el-table-column prop="number" label="项目编号" width="180">
          </el-table-column>
          <el-table-column prop="title" label="项目名称" width="180">
          </el-table-column>

          <el-table-column prop="address" label="项目地址">
          </el-table-column>
          <el-table-column label="操作" align="right">
            <template slot-scope="scope">
              <router-link :to="{ path: '/project/addProject', query: { id: scope.row.id } }">
                <el-button type="primary" round>修改</el-button>
              </router-link>
              <router-link :to="{ path: '/project/detailProject', query: { id: scope.row.id } }">
                <el-button type="primary" round>详情</el-button>
              </router-link>
              <el-button type="danger" @click="deleteProject(scope.row)" round>删除</el-button>
            </template>

          </el-table-column>
        </el-table>
      </template>
    </el-card>
    <!-- 表格 -->

  </div>
</template>
  
<script>
import clientApi from '@/api/client'
import projectApi from '@/api/project'

export default {
  name: 'projectIndex',
  data() {
    return {
      searchModel: {
        pageNo: 1,//页数
        pageSize: 10,
        pageSizes: [5, 10, 20, 50],

        title: '',
        uid: '',
        userList: [],
      },
      projectList: [],
    }
  },
  methods: {
    //删除项目
    deleteProject() {
      alert('删除项目');
    },
    //获取下拉框用户
    getUidList() {
      clientApi.getUidList().then(response => {
        this.searchModel.userList = response.data;
      })
    },
    //获取项目列表
    getProjectList() {
      projectApi.getProjectList(this.searchModel).then(response => {
        console.log(response.data.list.data);
        this.projectList = response.data.list;
      })
    }
  },
  created() {
    this.getUidList();
    this.getProjectList();
  },
}
</script>
  
<style></style>